<template>
      <div class="app-container">
            <div class="filter-container">
                  <el-input style="width: 200px;" class="filter-item" placeholder="请输入企业名称" @keyup.enter.native="handleFilter" v-model="listQuery.companyName">
                  </el-input>
                  <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">
                        搜索
                  </el-button>
                  <el-button class="filter-item" style="float:right" type="default" icon="edit" @click="handleCreate">
                        新建企业
                  </el-button>
            </div>
            <el-table :data="tableData" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
      
                  <el-table-column align="center" label="序号" min-width="65">
                        <template scope="scope">
                              <span>{{scope.$index+1+(listQuery.page-1)*listQuery.limit}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column min-width="150" align="left" label="企业名称">
                        <template scope="scope">
                              <span>{{scope.row.companyName}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column min-width="250" label="企业地址">
                        <template scope="scope">
                              <span>{{scope.row.companyAddr}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column width="140" label="企业联系人">
                        <template scope="scope">
                              <span>{{scope.row.contactPerson}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column width="140" label="联系电话">
                        <template scope="scope">
                              <span>{{scope.row.contactPhone}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column width="140" label="企业状态">
                        <template scope="scope">
                              <span :class="scope.row.state=== 0 ?'infoColor':'silverColor'">{{ scope.row.state === 0 ?"启用":"锁定" }}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column label="操作" width="140">
                        <template scope="scope">
                              <el-button size="small" type="success" @click="handleUpdate(scope.row)">
                                    编辑
                              </el-button>
                              <el-button size="small" :type="scope.row.state=== 1 ?'primary':'default'" @click="handleModifyStatus(scope,scope.row.state=== 1 ? 0 : 1 ,scope.row.companyName)">
                                    <!-- @click="handleDelete(scope.$index, scope.row)"-->
                                    {{ scope.row.state=== 1 ? "启用":"锁定" }}
                              </el-button>
                        </template>
                  </el-table-column>
            </el-table>
            <div v-show="!listLoading" class="pagination-container">
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                  </el-pagination>
            </div>
            <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style='margin-top:50px;' size="tiny">
                  <el-form :model="temp" label-position="left" :rules="rules" ref="temp">
                        <el-form-item label="企业名称" prop="companyName" :label-width="formLabelWidth">
                              <el-input v-model="temp.companyName" auto-complete="off" :style="inputWidth" :maxlength="maxlength1"></el-input>
                        </el-form-item>
      
                        <el-form-item label="企业地址" prop="companyAddr" :label-width="formLabelWidth">
                              <el-input v-model="temp.companyAddr" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                        </el-form-item>
      
                        <el-form-item label="联系人" prop="contactPerson" :label-width="formLabelWidth">
                              <el-input v-model="temp.contactPerson" auto-complete="off" :style="inputWidth" :maxlength="maxlength1"></el-input>
                        </el-form-item>
      
                        <el-form-item label="联系电话" prop="contactPhone" :label-width="formLabelWidth">
                              <el-input v-model="temp.contactPhone" auto-complete="off" :style="inputWidth" :maxlength="maxlength3"></el-input>
                        </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="create">确 定</el-button>
                  </div>
            </el-dialog>
      </div>
</template>
<script>
export default {
      data() {
            return {
                  tableData: null,
                  list: null,
                  listCopy: null,
                  total: null,
                  listLoading: true,
                  listQuery: {
                        page: 1,
                        limit: 10,
                        companyName: ''
                  },
                  dialogFormVisible: false,
                  dialogStatus: '',
                  temp: {
                        companyId: '',
                        companyName: '',
                        companyAddr: '',
                        contactPerson: '',
                        contactPhone: '',
                  },
                  textMap: {
                        update: '编辑企业信息',
                        create: '创建企业信息'
                  },
                  inputWidth: {
                        width: '90%'
                  },
                  formLabelWidth: '100px',
                  rules: {
                        companyName: [
                              { required: true, message: '请输入企业名称', trigger: 'blur' }
                        ],
                        companyAddr: [
                              { required: true, message: '请输入企业地址', trigger: 'blur' }
                        ],
                        contactPerson: [
                              { required: true, message: '请输入联系人姓名', trigger: 'blur' }
                        ],
                        contactPhone: [
                              { required: true, message: '请输入联系电话', trigger: 'blur' }
                        ]
                  },
                  maxlength1: 50,
                  maxlength2: 200,
                  maxlength3: 30
            }
      },
      created() {
            this.getList();
      },
      methods: {
            getList() {
                  this.listLoading = true;
                  this.$http.get('/sys/company/alllist')
                        .then((response) => {
                              // console.log(response);
                              if (response.code === 0) {
                                    this.list = response.data;
                                    this.listCopy = response.data;
                                    this.total = response.data.length;
                                    this.listLoading = false;
                                    this.pageChange(this.listQuery.page);
                                    // console.log(this.list);
                              }
                        })
                        .catch(function (response) {
                              console.log(response)
                        })
            },
            //搜索筛选
            handleFilter() {
                  this.listCopy = this.list.filter(item => {
                        return item.companyName.indexOf(this.listQuery.companyName) > -1;
                  });
                  this.total = this.listCopy.length;
                  this.pageChange(this.listQuery.page);
            },
            //以下，分页函数
            handleSizeChange(val) {
                  this.listQuery.limit = val;
                  this.pageChange(this.listQuery.page);
            },
            handleCurrentChange(val) {
                  this.listQuery.page = val;
                  this.pageChange(val);
            },
            pageChange(page) {
                  this.tableData = this.listCopy.slice((page - 1) * this.listQuery.limit, page * this.listQuery.limit);
            },
            //新建信息，弹对话框
            handleCreate() {
                  this.resetTemp();
                  this.dialogStatus = 'create';
                  this.dialogFormVisible = true;
            },
            //编辑信息
            handleUpdate(row) {
                  if (this.$refs['temp']) {
                        this.$refs['temp'].resetFields();
                  }
                  this.temp = Object.assign({}, row);
                  this.dialogStatus = 'update';
                  this.dialogFormVisible = true;
            },
            //改变状态
            handleModifyStatus(scope, status, companyName) {
                  const h = this.$createElement;
                  var title = '';
                  var message = '';
                  var change = '';
                  var id = scope.row.companyId;
                  if (status === 1) {
                        title = '锁定企业';
                        message = h('p', null, [h('span', null, '停用企业信息会导致该企业包含的所有账号状态更改为 '), h('span', { style: 'color: #f00' }, '锁定'), h('span', null, '，是否确认锁定'), h('span', { style: 'color: #20A0FF' }, companyName), h('span', null, '这个企业')]);
                        change = '锁定成功'
                  } else {
                        title = '解锁企业';
                        message = '是否解锁该企业？该企业所属的所有账号信息也会随之解锁。';
                        change = '解锁成功'
                  }
                  this.$msgbox({
                        title: title,
                        message: message,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        showCancelButton: true,
                        type: 'warning'
                  }).then(action => {
                        if (action === 'confirm') {
                              this.$http.put('/sys/company/updateState', {
                                    "companyId": id,
                                    "state": status
                              })
                                    .then((response) => {
                                          // console.log(response);
                                          if (response.code === 0) {
                                                scope.row.state = scope.row.state === 0 ? 1 : 0;
                                                this.showMessage(change, "success");
                                          }
                                    })
                                    .catch(function (response) {
                                          console.log(response);
                                          this.showMessage('系统错误!', 'error');
                                    })
                        } else {
                              this.showMessage('已取消更改!', 'info');
                        }
                  }).catch(() => {
                        this.showMessage('已取消更改!', 'info');
                  });
            },
            // handleDelete(index, row) {
            //       this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            //             confirmButtonText: '确定',
            //             cancelButtonText: '取消',
            //             type: 'warning'
            //       }).then(() => {
            //             this.listCopy.splice(index, 1);
            //             this.total = this.listCopy.length;
            //             this.pageChange(this.listQuery.page);
            //             this.showMessage("删除成功!", "success");
            //             this.$message({
            //                   type: 'success',
            //                   message: '删除成功!'
            //             });
            //       }).catch(() => {
            //             this.$message({
            //                   type: 'info',
            //                   message: '已取消删除'
            //             });
            //       });

            // },

            //新建和修改信息
            create() {
                  // console.log(this.temp);
                  var url = '';
                  this.$refs['temp'].validate((valid) => {
                        if (valid) {
                              if (this.dialogStatus === 'create') {
                                    url = '/sys/company/add';
                                    this.$http.post(url, {
                                          "companyName": this.temp.companyName,
                                          "companyAddr": this.temp.companyAddr,
                                          "contactPerson": this.temp.contactPerson,
                                          "contactPhone": this.temp.contactPhone,
                                    })
                                          .then((response) => {
                                                console.log(response);
                                                if (response.code === 0) {
                                                      this.dialogFormVisible = false
                                                      this.showMessage('创建成功!', 'success');
                                                      this.getList();
                                                } else {
                                                      this.dialogFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              } else {
                                    url = '/sys/company/update';
                                    this.$http.put(url, {
                                          "companyId": this.temp.companyId,
                                          "companyName": this.temp.companyName,
                                          "companyAddr": this.temp.companyAddr,
                                          "contactPerson": this.temp.contactPerson,
                                          "contactPhone": this.temp.contactPhone,
                                    })
                                          .then((response) => {
                                                if (response.code === 0) {
                                                      this.dialogFormVisible = false;
                                                      this.showMessage('修改成功!', 'success');
                                                      this.getList();
                                                } else {
                                                      this.dialogFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              }
                        } else {
                              console.log('error submit!!');
                              return false;
                        }
                  });
            },
            //置空temp数据，防止绑定信息
            resetTemp() {
                  if (this.$refs['temp']) {
                        this.$refs['temp'].resetFields();
                  }

                  this.temp = {
                        companyId: '',
                        companyName: '',
                        companyAddr: '',
                        contactPerson: '',
                        contactPhone: ''
                  };
            },
            showMessage(msg, type) {
                  this.$message({
                        message: msg,
                        type: type
                  });
            }
      }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.filter-container {
      padding-bottom: 10px;
      .filter-item {
            margin-bottom: 10px;
      }
}

.pagination-container {
      margin-top: 30px;
}

.infoColor {
      color: #58B7FF
}

.silverColor {
      color: #8492A6
}
</style>